(function(w) {
    var component = {
        popup: {
            toast: function() {
                return Vue.component('toast', {
                    template: '<div class="s-popup-toast" v-show="isShow" :class="{\'active\': active}">' +
                        '<span>' +
                        '{{text}}' +
                        '</span>' +
                        '</div>',
                    data: function() {
                        return {
                            isShow: false,
                            active: false,
                            text: ''
                        }
                    },
                    methods: {
                        show: function(txt, time) {
                            if (this.isShow) return;
                            this.text = txt;
                            this.isShow = true;
                            setTimeout(function() {
                                this.active = true;
                            }.bind(this), 20);
                            if (!time || time >= 0) {
                                setTimeout(function() {
                                    this.active = false;
                                    setTimeout(function() {
                                        this.isShow = false;
                                    }.bind(this), 500);
                                }.bind(this), time || 2000);
                            }
                        }
                    }
                });
            },
            
            confirm: function(arg) {
                return Vue.component(arg.name, {
                    template: '<div class="spopup" v-show="isShow">' +
                        '<div class="spu-table">' +
                        '<div class="spu-table-cell">' +
                        '<div class="spu-wrapper">' +
                        '<div class="spu-title" v-show="title">' +
                        '<h2>{{title}}</h2>' +
                        '<i @click="close">&times;</i>' +
                        '</div>' +
                        '<div class="spu-content" v-html="content">' +
                        '</div>' +
                        '<div class="spu-btn">' +
                        '<a href="javascript:void(0)" class="spu-btn-style1" @click="cancelHandle" v-if="type == \'confirm\'">{{cancelText || "取消"}}</a>' +
                        '<a href="javascript:void(0)" :class="{\'spu-btn-style2\': type == \'confirm\',\'spu-btn-style3\': type != \'confirm\'}" @click="confirmHandle">{{confirmText || "确认"}}</a>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>',
                    data: function() {
                        return {
                            isShow: false,
                            title: arg.title,
                            cancel: arg.cancel,
                            cancelText: arg.cancelText,
                            confirm: arg.confirm,
                            confirmText: arg.confirmText,
                            type: arg.type,
                            content: arg.content
                        }
                    },
                    methods: {
                        show: function(obj) {
                            var obj = obj || {};
                            this.isShow = true;
                            if (obj.title) { this.title = obj.title };
                            obj.content && (this.content = obj.content);
                            obj.cancelText && (this.cancelText = obj.cancelText);
                            obj.cancel && (this.cancel = obj.cancel);
                            obj.confirmText && (this.confirmText = obj.confirmText);
                            obj.confirm && (this.confirm = obj.confirm);
                        },
                        close: function() {
                            this.isShow = false;
                        },
                        cancelHandle: function() {
                            if (!this.cancel || (this.cancel && !this.cancel())) {
                                this.isShow = false;
                            }

                        },
                        confirmHandle: function() {
                            if (!this.confirm || (this.confirm && !this.confirm())) {
                                this.isShow = false;
                            }
                        }
                    }
                });
            }
        }
    };
    w.component = component;
})(window);